import React,{Component} from 'react';
import util from '../../../core/utils';
import './VideoCustomer.less';


export default class VideoCustomer extends Component{

  constructor(){
    super()
    this.state={
      isPlay:false
    }
  }

  render(){
    return <div className='customer-video-wrapper' onClick={this.props.onClick}>
      <div className="img-wrapper">
        <img src={this.props.data&&this.props.data.cover||'/assets/images/components/widgets/VideoCustomer/images/exhibition_banner.png'} alt=""/>
      </div>
      <div className="switch-pause-content">
        <div className="big-video-top-text">入门教程</div>
        <div className="big-video-bottom-text">学会艺维 只需10分钟</div>
        <div className="switch-pause-play-wrapper">
          <div className="switch-pause-play"></div>
        </div>
      </div>

    </div>
  }

  handleLoadStart=(e)=>{
    let element=e.target;
    element.playbackRate=1;
  }

  handlePlay=(e)=>{
    let switchBtn=document.getElementsByClassName('switch-pause-play-wrapper')[0];
      switchBtn.style.opacity='0';
      switchBtn.style.visibility='hidden'
      this.setState({isPlay:true})
  }

  onPause=(e)=>{
    let switchBtn=document.getElementsByClassName('switch-pause-play-wrapper')[0];
    switchBtn.style.opacity='1';
    switchBtn.style.visibility='visible'
  }


  handleCanPlay=(e)=>{
    let element=e.target;
    let img=document.getElementsByClassName('img-wrapper')[0];
    img.style.display='none'
    element.style.display='block';
  }

  handleEnded=(e)=>{
    let img=document.getElementsByClassName('img-wrapper')[0];
    let switchBtn=document.getElementsByClassName('switch-pause-play-wrapper')[0];
    switchBtn.style.opacity='1';
    switchBtn.style.visibility='visible'
    img.style.display='block'
    this.setState({isPlay:false})
  }



  //暂停播放
  handlePause=()=>{
    let switchBtn=document.getElementsByClassName('switch-pause-play-wrapper')[0];
    let video=document.querySelector('video');
    if(!video.paused){
      switchBtn.style.opacity='1';
      switchBtn.style.visibility='visible'
      video.pause()
    }else{
      video.play()
      switchBtn.style.opacity='0';
      switchBtn.style.visibility='hidden'
    }
  }



//点击播放
  handleSwitchClick=(e)=>{
    let video=document.querySelector('video');
    if(video.paused){
      video.play()
    }else{
      video.pause()
    }
  }

}